<template>
  <div>
    <div class="map-container" @click="handleMapClick">
      <img :src="mapImage" alt="Map" class="map-image" style="max-width: 1267px;
      min-width: 1267px;min-height: 1163px; max-height: 1163px; margin: 20px 20px 20px 200px">
      <div
          v-for="(location, index) in locations"
          :key="index"
          :style="{ left: location.coords.x + 'px', top: location.coords.y + 'px' }"
          class="marker"
          @click.stop="handleLocationClick(location)"
      ></div>

      <div v-if="showPopup" :style="{ top: popupY + 'px', left: popupX + 'px' }" class="popup">
        <div class="popup-content">
          <h3>{{ selectedLocation.name }}</h3>
          <p>{{ selectedLocation.info }}</p>
          <el-button @click="closePopup">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';


const mapImage = 'https://www.seig.edu.cn/Public/images/map.jpg';


const locations = [
  {
    id    : 1,
    name  : '太平站',
    info  : "太平站（Taiping Station），位于中国广东省广州市从化区太平镇，由广州地铁集团有限公司管理运营，是广州地铁14号线的中间站，因位于太平镇而得以命名 [8]。" +
        "2014年3月4日，广州地铁14号线获批，规划在太平镇设站 [3]。2017年2月20日，太平站主体结构工程开始施工。11月22日，太平站封顶 [2]。2018年3月29日，该站定名为太平站 [4]。12月28日，太平站随广州地铁14号线投入使用 [5]。" +
        "据2021年12月广州地铁官网显示，太平站共设置2个出入口 [7]，为路中高架三层式双岛四线车站。",
    coords: {
      x: 350,
      y: 345
    },
  }

];

const showPopup = ref(false);
const selectedLocation = ref({
  name: '',
  info: ''
});
const popupX = ref(0);
const popupY = ref(0);

const handleMapClick = () => {
  showPopup.value = false;
};

const handleLocationClick = (location) => {
  selectedLocation.value = location;
  popupX.value = location.coords.x;
  popupY.value = location.coords.y;
  showPopup.value = true;
};

const closePopup = () => {
  showPopup.value = false;
};
</script>

<style scoped>
.map-container {
  position: relative;
  display: inline-block;
}

.map-image {
  width: 100%;
  height: auto;
}


.marker {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  cursor: pointer;
}


.popup {
  width: 600px;
  position: absolute;
  color: white;
  background: linear-gradient(to right, #4cc696 25%, #2e48ba);
  border: 1px solid #ddd;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.popup-content {
  text-align: center;
}
</style>
